<template>
	<div>
		<div class="map" ref="map"></div>
	</div>
</template>

<script>
	import "echarts/map/js/china.js"
	import jsonp from 'jsonp'
	export default {
		data() {
			return {
				echarts: require('echarts'), //获取echarts
				chinaMapOption: {},
			}
		},
		methods: {
			getMap: function() {
				const option = {
					title: {
						text: "",
						link: "",
						subtext: "中国疫情分布情况",
						sublink: ""
					},
					// ----------   series：地图数据可视化，添加data数据    ---------------------

					series: [{
						name: "确诊人数",
						type: 'map', // 告诉echarts 要去渲染的是一个地图
						map: 'china', // 告诉echarts  要去渲染中国地图
						label: { // 控制对应地区的汉字      
							show: true,
							color: '#333', // 控制地区名的字体颜色---黑色，省名字
							fontSize: 12
						},
						itemStyle: { // 地图板块的颜色和边框---灰色，各个省界线
							areaColor: '#F8F9FA',
							// borderColor:'blue'
						},
						// roam: true,
						zoom: 1.3, // 控制地图的放大和缩小
						emphasis: { // 控制鼠标滑过之后的背景色和字体颜色--白色       
							label: {
								color: '#fff',
								fontSize: 15
							},
							itemStyle: {
								areaColor: '#83b5e7', //  滑动到哪个地区就显示蓝色
							}
						},
						data: [] // 用来展示后台给的数据的 {name:xx,value:xxx}
					}],

					//-----------    visualMap：视觉映射，每个颜色代表什么含义   -----------------------------
					visualMap: [{
						type: 'piecewise',
						show: true,
						// splitNumber:4,
						pieces: [ // 分段
							{
								min: 10000
							},
							{
								min: 1000,
								max: 9999
							},
							{
								min: 100,
								max: 999
							},
							{
								min: 10,
								max: 99
							},
							{
								min: 1,
								max: 9
							}
						],
						// align:'right',// 默认left
						// orient:'horizontal' 默认竖直
						// left right 这些属性控制 分段坐在的位置
						// showLabel:false
						textStyle: {
							color: 'black'
						},
						inRange: {
							symbol: 'rect',
							color: ['#ffc0b1', '#9c0505'] //   浅红~~深红色
						},
						itemWidth: 20,
						itemHeight: 10
					}],
					tooltip: {
						trigger: 'item'
					},
					toolbox: {
						show: true,
						orient: 'vertical',
						left: 'right',
						top: 'center',
						feature: {
							// dataView: {readOnly: false},
							// restore: {},
							// saveAsImage: {}
						}
					},
				}
				jsonp('https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427', {}, (err, data) => {
					if (!err) {
						// eslint-disable-next-line no-console
						// console.log(data)
						let list = data.data.list.map(item => (
							// eslint-disable-next-line no-console
							// console.log(item),
							{
								name: item.name,
								value: item.value,
								susNum: item.susNum
							}))
						option.series[0].data = list
						this.chinaMapOption = option
						let chart = this.echarts.init(this.$refs.map)
						chart.setOption(this.chinaMapOption)
					}
				})
			}
		},
		mounted() {
			this.getMap()
			let chart = this.echarts.init(this.$refs.map)
			chart.setOption(this.chinaMapOption)
			window.onresize = () => {
				setTimeout(() => {
					chart.resize()
				}, 10)
			}
		}
	}
</script>

<style>
	.container .middle .map {
		background-color: #F8F9FA;
		margin: 5px 0 0 0;
		height: calc(60vh - 50px);
	}
</style>
